var step = new Vue({
	el: '#step',
	data: {
		themeColor: '#FBD054',
		timeTab: ['日', '周', '月', '年'],
		timeType: 0,
		myDate: new Date,
		nowTime: '',
		startTime: '',
		endTime: '',
		progress: 0,
		step: 3000, //当天步数
		targetStep: 0, //计划步数
		chart: null,
		dayChart: null,
		popupVisible: false,
		slots: [{
			flex: 1,
			values: ['30000', '25000', '20000', '15000', '10000', '5000'],
			defaultIndex: 2
		}]
	},
	created() {
		this.nowTime = dayjs(this.myDate).format('YYYY/MM/DD');
		this.startTime = dayjs(this.myDate).subtract(1 % 7, 'days').startOf('week').add(1 % 7, 'days').format(
			'YYYY/MM/DD');
		this.endTime = dayjs(this.myDate).subtract(1 % 7, 'days').endOf('week').add(1 % 7, 'days').format(
			'YYYY/MM/DD');
	},
	mounted() {
		this.initCalendar()
		this.initMainChart()
		this.initDayChart()
		this.targetStep = this.slots[0].values[2]
	},
	methods: {
		confirm() {
			this.targetStep = this.progress
			this.popupVisible = false;
		},
		onValuesChange(picker, values) {
			this.progress = values[0]
		},
		initMainChart() {
			const info = [{
					genre: '00:00',
					step: 120
				},
				{
					genre: '01:00',
					step: 300
				},
				{
					genre: '02:00',
					step: 600
				},
				{
					genre: '03:00',
					step: 1200
				},
				{
					genre: '04:00',
					step: 40
				},
				{
					genre: '05:00',
					step: 123
				},
				{
					genre: '06:00',
					step: 131
				},
				{
					genre: '07:00',
					step: 2342
				},
				{
					genre: '08:00',
					step: 1234
				},
				{
					genre: '09:00',
					step: 275
				},
				{
					genre: '10:00',
					step: 115
				},
				{
					genre: '11:00',
					step: 120
				},
				{
					genre: '12:00',
					step: 350
				},
				{
					genre: '13:00',
					step: 150
				},
				{
					genre: '14:00',
					step: 120
				},
				{
					genre: '15:00',
					step: 350
				},
				{
					genre: '16:00',
					step: 150
				},
				{
					genre: '17:00',
					step: 350
				},
				{
					genre: '18:00',
					step: 150
				},
				{
					genre: '19:00',
					step: 120
				},
				{
					genre: '20:00',
					step: 350
				},
				{
					genre: '21:00',
					step: 150
				},
				{
					genre: '22:00',
					step: 120
				},
				{
					genre: '23:00',
					step: 350
				},
				{
					genre: '24:00',
					step: 150
				}
			];
			this.chart = new F2.Chart({
				id: 'mainChart',
				pixelRatio: window.devicePixelRatio
			});
			this.chart.source([], {
				genre: {
					min: 0,
					tickCount: 4
				}
			});
			this.chart.tooltip({
				showItemMarker: false,
				triggerOn: ['touchstart', 'touchmove'],
				triggerOff: 'touchend', // 消失的触发行为，可自定义
				showCrosshairs: true, // 是否显示辅助线
				yTipBackground: {
					fill: null
				},
				crosshairsStyle: {
					stroke: this.themeColor
				},
				background: {
					radius: 10,
					fill: '#EEEEEE',
					padding: [6, 10]
				}, // tooltip 内容框的背景样式
				valueStyle: {
					fontSize: 9,
					fill: '#333333',
				},
				nameStyle: {
					fontSize: 9,
					fill: '#333333',
				},
				onShow: function onShow(ev) {
					const items = ev.items;
					items[0].name = null;
					items[0].name = items[0].title;
					items[0].value = items[0].value + ' 步';
				}
			});
			this.chart.interval().position('genre*step').color(this.themeColor).style({
				radius: [5, 5, 0, 0]
			});
			this.chart.axis('genre', {
				line: null
			});
			this.chart.axis('step', {
				grid: {
					lineDash: null,
					lineWidth: 0
				}
			});
			this.chart.render();

			setTimeout(() => {
				this.chart.changeData(info);
			}, 100);
		},
		initDayChart() {
			const data = [{
				x: 'rate',
				y: 85
			}];
			// 天，目标百分比图标
			this.dayChart = new F2.Chart({
				id: 'dayChart',
				pixelRatio: window.devicePixelRatio,
				padding: 15
			});
			this.dayChart.source(data, {
				y: {
					max: 100,
					min: 0
				}
			});
			this.dayChart.axis(false);
			this.dayChart.tooltip(false);
			this.dayChart.coord('polar', {
				transposed: true,
				innerRadius: 0.8
			});
			this.dayChart.guide().arc({
				start: [0, 0],
				end: [1, 99.98],
				top: false,
				style: {
					lineWidth: 10,
					stroke: '#FEF7E4'
				}
			});
			this.dayChart.guide().text({
				position: ['50%', '50%'],
				content: '85%',
				style: {
					fill: '#333333',
					fontSize: '18',
				}
			});
			this.dayChart.interval().position('x*y').size(10)
				.shape('tick')
				.color(this.themeColor)
				.animate({
					appear: {
						duration: 1200,
						easing: 'cubicIn',
						animation: function animation(shape, animateCfg) {
							const startAngle = shape.attr('startAngle');
							const endAngle = shape.attr('endAngle');
							shape.attr('endAngle', startAngle);
							shape.animate().to(Util.mix({
								attrs: {
									endAngle
								}
							}, animateCfg)).onUpdate(function(frame) {
								$('#number').text(parseInt(frame * 85) + '%');
							});
						}
					}
				});
			this.dayChart.render();

			setTimeout(() => {
				this.step = 2000
				this.dayChart.changeData([{
					x: 'rate',
					y: Math.floor(Math.random() * 60 + 20)
				}]);
			}, 2000);
		},
		initCalendar() {
			//天
			var stepDate = new XNDatepicker(document.querySelector("#step-date"), {
				format: 'YYYY/MM/DD',
				type: 'date',
				multipleDates: [], //当为多选日期类型时的初始值
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function(data) {
				console.log(data)
			}, function(close) {
				console.log(close)
			})
			//周
			var stepDate = new XNDatepicker(document.querySelector("#step-week"), {
				format: 'YYYY/MM/DD',
				type: 'week',
				multipleDates: [], //当为多选日期类型时的初始值
				startTime: this.startTime,
				endTime: this.endTime,
				separator: '-',
				showType: 'modal',
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function(data) {
				console.log(data)
			})
			//月
			var stepDate = new XNDatepicker(document.querySelector("#step-month"), {
				format: 'YYYY/MM',
				type: 'month',
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function(data) {
				console.log(data)
			})
			//年
			var stepDate = new XNDatepicker(document.querySelector("#step-year"), {
				type: 'year',
				startTime: this.nowTime,
				firstDayOfWeek: 1,
				theme: 'black',
				showClear: false,
				showShortKeys: false
			}, function(data) {
				console.log(data)
			})
		}
	},
	filters: {
		filterTitle(num) {
			switch(num*1){
				case 0:
					return '我的目标'
				case 1:
					return '本周日均步数'
				case 2:
					return '本月日均步数'
				case 3:
					return '本年月均步数'
			}
		}
	}
})

$(document).ready(function() {
	$(".date-info .show-date").on('click', function() {
		$("#dateMask").addClass('show').removeClass("hide");
	})
})